<template>
  <button
    class="tw-w-10 tw-rounded-full tw-flex tw-justify-around tw-bg-[#8e96aa24] tw-border-2 tw-border-neutral-300 hover:tw-border-neutral-800 dark:tw-border-gray-600 dark:hover:tw-border-gray-300"
    @click="toggleDarkMode"
  >
    <i
      class="iconfont icon-sun tw-text-base/[1rem] tw-text-[20px] tw-rounded-full tw-opacity-100 tw-bg-white tw-border-white dark:tw-opacity-0 toggle-transition"
    ></i>
    <i
      class="iconfont icon-moon tw-text-base/[1rem] tw-text-[20px] tw-rounded-full tw-opacity-0 tw-bg-black dark:tw-opacity-100 toggle-transition"
    ></i>
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import darkTheme from '../composables/darkThemeUtils'
darkTheme.initTheme()
const toggleDarkMode = () => darkTheme.toggleMode()
</script>
